<template>

  <div class="panel-container">
    <el-row :gutter="18" class="order-sumlist">
    <div class="divBox">
        <div class="selCard">



        </div>
        <el-card class="mt14">

          <div id="toolbar" class="toolbar">
                           <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新"><i class="fa fa-refresh"></i> </a>
                            <span style="font-weight:bold;margin-right:10px;">项目数据统计</span>

            </div>


              <el-table v-loading="listLoading" :data="atableData.data" size="small" class="table" highlight-current-row style='margin-top:20px'>

                 <el-table-column prop="title" label="项目名称" min-width="100" />
                 <el-table-column prop="order_num" label="订单数量" min-width="100" />
                 <el-table-column prop="order_price" label="订单金额" min-width="100" />
                 <el-table-column prop="views" label="浏览人数" min-width="100" />


              </el-table>
              <div class="block">
                  <el-pagination background :page-size="atableFrom.limit" :current-page="atableFrom.page" layout="total, prev, pager, next, jumper" :total="atableData.total" @size-change="handleSizeChange" @current-change="pageChange"/>
              </div>
           </el-card>

           </div>
          </el-row>

    </div>
</template>

<script>


import { integralOrderExcelApi, integralOrderDeleteApi } from "@/api/marketing";
import timeOptions from '@/utils/timeOptions';
import { activityCateSelect, ordercolumnsum, activityOrderVerifyApi } from '@/api/activity'
export default {
    data() {
        return {
            select: "",
            keywords: "",
            orderId: 0,
            atableData: {
                data: [],
                total: 0,
            },
            pickerOptions: timeOptions,
            listLoading: true,
            atableFrom: {
                keywords: "",
                order_sn: "",
                status: "",
                date: "",
                page: 1,
                limit: 20,
                product_id: '',
            },
            timeVal: [],
            ids: "",
            uid: "",
            visibleDetail: false,
            tableFromLog: {
                page: 1,
                limit: 10,
            },
            loading: false,
            dialogVisible: false,
            cardLists: [],
            orderDatalist: null,
            drawer: false,
          categoryList:[]
        };
    },
    watch: {
        '$route.query.id': {
            handler: function(val) {
                this.atableFrom.product_id  = val || ""
                this.getList('');
            },
            immediate: false,
            deep: true
        },
    },
    mounted() {
        if (this.$route.query.id) {
            this.atableFrom.product_id = this.$route.query.id;
        } else {
            this.atableFrom.product_id = "";
        }
      this.getCategoryList()
        this.getList('');
    },
    // 被缓存接收参数
    activated() {
        if (this.$route.query.id) {
            this.atableFrom.product_id = this.$route.query.id;
        } else {
            this.atableFrom.product_id = "";
        }
        this.getList('');
    },
    methods: {
      getCategoryList() {
        activityCateSelect()
          .then(res => {
            this.categoryList = res.data
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      },
        /**重置 */
        searchReset(){
            this.timeVal = []
            this.atableFrom.date = ""
            this.atableFrom.order_sn = ""
            this.atableFrom.nickname = ""
            this.atableFrom.activity_name = ""
            this.keywords = ""
            this.$refs.searchForm.resetFields()
            this.changeSearch()
        },
        /**订单列表 */
        downData(excelData) {
            return new Promise((resolve, reject) => {
                integralOrderExcelApi(excelData).then((res) => {
                    return resolve(res.data)
                })
            })
        },
        // 订单核销
      handleVerify(row, idx) {
            this.$modalSure('确定核销改订单？').then(() => {
              activityOrderVerifyApi(row.order_id).then(({ message }) => {
                this.$message.success(message)
                this.getList('');
              }).catch(({ message }) => {
                this.$message.error(message)
              })
            })
        },
        // 详情
        onOrderDetails(id) {
            this.orderId = id;
            this.$refs.orderDetail.getInfo(id);
            this.drawer = true;
        },
        changeDrawer(v) {
            this.drawer = v;
        },
        closeDrawer() {
            this.drawer = false;
        },
        pageChangeLog(page) {
            this.tableFromLog.page = page;
            this.getList('');
        },
        handleSizeChangeLog(val) {
            this.tableFromLog.limit = val;
            this.getList('');
        },
        // 具体日期
        onchangeTime(e) {
            this.timeVal = e;
            this.atableFrom.date = e ? this.timeVal.join('-') : '';
            this.changeSearch();
        },
        changeSearch(){
            this.resetSearchVal();
            this.getList(1);
        },
        resetSearchVal(){
            this.atableFrom.phone="";
            this.atableFrom.uid="";
            this.atableFrom.keywords="";
        },
        // 列表
        getList(num) {
            this.listLoading = true;
            this.atableFrom.page = num ? num : this.atableFrom.page;
            ordercolumnsum(this.atableFrom)
                .then((res) => {
                    this.atableData.data = res.data.list;
                    this.atableData.total = res.data.count;
                    this.listLoading = false;
                })
                .catch((res) => {
                    this.$message.error(res.message);
                    this.listLoading = false;
                });
        },
        pageChange(page) {
            this.atableFrom.page = page;
            this.getList('');
        },
        handleSizeChange(val) {
            this.atableFrom.limit = val;
            this.getList('');
        },
    },
};
</script>

<style lang="scss" scoped>
.demo-table-expand ::v-deep label {
    width: 83px !important;

}
::v-deep .el-input-group__prepend .el-input{
    width: 90px;
}
::v-deep .el-input-group__prepend div.el-select .el-input__inner{
    padding: 0 10px;
    display: block;
    font-size: 13px;
}
.selWidth {
    width: 260px;
}
.el-dropdown-link {
    cursor: pointer;
    color: var(--prev-color-primary);
    font-size: 12px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
}
::v-deep .row-bg .cell {
    color: red !important;
}

$textColor: #8d8d8d;
.panel-container {
  // background: #fff;
  .panel-title {
    padding: 20px 20px 0 20px;
  }
}
.el-input__inner {
  border: none !important;
}
.align-right {
  text-align: right;
}
.panel-group {
  .card-panel {
    cursor: pointer;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    color: #8C8C8C;
    background: #fff;
    position: relative;
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      padding: 0 20px;
      margin: 19px 0;
      .card-panel-text {
        line-height: 18px;
        margin-bottom: 12px;
        font-weight: normal;
        align-items: center;
        justify-content: space-between;
        display: flex;
        .card-order{
          color: #303133;
          font-size: 16px;
        }
        .card-date{
          border: 1px solid #6394F9;
          border-radius: 3px;
          color: #6394F9;
          background: #F4F7FF;
          text-align: center;
          line-height: 20px;
          width: 38px;
        }
      }
      .card-panel-num {
        font-size: 30px;
        color: #000;
        font-weight: bold;
      }
    }
  }
  .card-panel-compared {
    margin: 15px 0;
    span {
      color: red;
      margin-left: 5px;
      i {
        display: inline-block;
        border: 5px solid transparent;
        border-bottom: 5px solid red;
        position: relative;
        bottom: 1px;
        left: 5px;
      }
      &.isdecline {
        color: green;
        i {
          border-bottom: none;
          border-top: 5px solid green;
        }
      }
    }
  }
  .card-panel-date{
    border-top: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
  }
}
.panel-group-count{
  margin-top: 18px;
  .card-panel-item{
    float: left;
  }
  .card-panel-count{
    background-color: #ffffff;
    border-radius: 4px;
    // width: 90%;
    height: 104px;
    text-align: center;
    padding-top: 20px;
    span{
      display: block;
    }
    .iconfont{
      font-size: 27px;
    }
    .panel-text{
      font-size: 14px;
      color: #303133;
      margin-top: 15px;
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
@media only screen and (min-width: 768px) {
  .el-col-sm-4-8 {
    width: 20%;
  }
}

@media only screen and (min-width: 992px) {
  .el-col-md-4-8 {
    width: 20%;
  }
}

@media only screen and (min-width: 1200px) {
  .el-col-lg-4-8 {
    width: 20%;
  }
}

@media only screen and (min-width: 1920px) {
  .el-col-xl-4-8 {
    width: 20%;
  }
}
</style>
